<template>
  <van-nav-bar
      title="轻语"
      safe-area-inset-top
      @click-left="showTab"
      @click-right="toWrite"
  >
    <template #right>
      <van-icon name="edit" size="20"/>
    </template>
    <template #left>
      <van-icon name="wap-nav" size="20"/>
    </template>
  </van-nav-bar>

  <van-popup v-model:show="show" round position="left" @open="InitGreeting" :style="{ height: '60%', width: '50%'}">
    <div style="position: relative;top: 2%;left: 30%">
      <van-image
          height="60px"
          round
          width="60px"
          :src="currentUser.userAvatar"/>
    </div>

    <div style="position: relative;top: 4%;left: 10%;">
      <div style="font-weight: bold">{{ currentUser.userAccount }}</div>
      <div style="font-size: 12px;position: relative;top: 10px;color: darkgray">
        {{ today[0] + '年' + today[1] + '月' + today[2] + '日     ' + hello }}
      </div>
    </div>

    <div style="position: relative;top: 25%; left: 10%">
      <van-button class="p-space" icon="underway-o" size="normal" @click="showCalendar = true;show = false">时光轨迹</van-button>
    </div>
  </van-popup>
  <div class="small-box"/>
  <div id="countDown" style="display: flex;justify-content: center">
    <div class="words">新的一天将在</div>
    <van-count-down :time="time" format="HH 时 mm 分 ss 秒">
      <template #default="timeData">
        <span v-if="timeData.hours !== 0">
          <span class="block">{{ timeData.hours }}</span>
          <span class="colon">时</span>
        </span>
        <span v-if="timeData.minutes !== 0">
          <span class="block">{{ timeData.minutes }}</span>
          <span class="colon">分</span>
        </span>
        <span v-if="timeData.seconds !== 0">
          <span class="block">{{ timeData.seconds }}</span>
          <span class="colon">秒</span>
        </span>
      </template>
    </van-count-down>
    <div class="words">后开启，赶紧记录今日所见吧！</div>
  </div>

  <van-swipe v-if="content.length !== 0" style="height: 75vh;top: 2vh" vertical @change="showIndex">
    <van-swipe-item v-for="item in content" :key="item.id">
      <div class="card">
        <div id="today">
          <span id="year-mouth">{{ today[0] + '年' }}{{ today[1] + '月' }}</span>
          <span id="day">{{ today[2] }}</span>
          <span id="rank">{{ pageIndex }}</span>
        </div>
        <div id="images">
          <van-image v-for="url in item.photograph" :src="url" fit="cover" height="80px" width="80px"
                     style="margin-left: 5px;margin-right: 5px" @click="showPreview(url)">
          </van-image>
        </div>
        <div class="content">
          <div id="note" @touchmove="handleTouchMove">
            <QuillEditor :content="item.content"
                         theme="bubble"
                         :options="options"
                         contentType="html"
                         style="height: 200px; overflow: auto;"
            />
          </div>
        </div>
      </div>
      <div id="crud">
        <van-button color="#3276b7" plain @click="toEdit(item.id, item.title, item.photograph, item.content)">编辑
        </van-button>
        <van-button color="#3276b7" plain style="margin-left: 30px" @click="deleteDiary">删除</van-button>
      </div>
    </van-swipe-item>
  </van-swipe>

  <div class="card" v-else style="top: 22%">
    <div id="today">
      <span id="year-mouth">{{ today[0] + '年' }}{{ today[1] + '月' }}</span>
      <span id="day">{{ today[2] }}</span>
    </div>
    <van-empty description="写点什么吧..."/>
  </div>

  <div class="write-row">
    <van-button icon="edit" type="primary" class="write-btn" @click="toWrite"/>
  </div>

  <van-calendar v-model:show="showCalendar"
                @confirm="onConfirm"
                :min-date="minDate"
                :max-date="maxDate"
  />
</template>

<script setup lang="ts">
import '@vueup/vue-quill/dist/vue-quill.bubble.css';
import {useRoute, useRouter} from "vue-router";
import {onMounted, ref} from "vue";
import {getToday} from "../utils/tools";
import {getCurrentUser} from "../services/user";
import {getDiaryContent} from "../services/diary";
import myAxios from "../plugins/myAxios";
import {ImagePreview, Notify} from "vant";

const router = useRouter();
const route = useRoute();

const date = ref('');
const show = ref(false)
const showCalendar = ref(false)

const pageIndex = ref(1)

const currentUser = ref();

let maxDate = new Date(Date.now());
let minDate = new Date(2023,2,1);

const content = ref('')

const VanImagePreview = ImagePreview.Component;

const today = getToday().split('-');

const time = 24 * 60 * 60 * 1000 - today[3] * 60 * 60 * 1000 - today[4] * 60 * 1000 - today[5] * 1000;

let hello = '';
const InitGreeting = () => {
  if (24 - today[3] < 4) {
    hello = '晚上好'
  } else if (24 - today[3] > 4 && 24 - today[3] < 12) {
    hello = '下午好'
  } else {
    hello = '早上好'
  }
}

const formatDate = (date: Date) =>
    `${date.getFullYear()}${(date.getMonth() + 1) < 10 ? '0'+(date.getMonth() + 1) : date.getMonth() + 1}${(date.getDate() + 1) < 10 ? '0'+(date.getDate()) : date.getDate()}`;

const onConfirm = async (value: Date) => {
  showCalendar.value = false;
  date.value = formatDate(value);
  today[0] = formatDate(value).slice(0,4);
  today[1] = formatDate(value).slice(4,6);
  today[2] = formatDate(value).slice(6,8);
  content.value = await getDiaryContent(date.value);
  if (content.value.length === 0) {
    content.value = ''
  }
};

const options = {
  readOnly: true
}

const showTab = () => {
  show.value = true
};
const toWrite = () => {
  router.push('/user/write')
};

const showIndex = (index) => {
  pageIndex.value = index + 1
}

const toEdit = (diaryId: number, title: number, photograph: string[], content: string) => {
  router.push({
    path: '/diary/edit',
    query: {
      diaryId,
      title,
      photograph,
      content
    }
  })
}

const deleteDiary = async () => {
  const res = await myAxios.get(`/diary/remove?id=${content.value[pageIndex.value - 1].id}`)
  if (res.code === 0) {
    Notify({type: 'success', message: '删除成功'});
    window.location.reload();
  }
}

onMounted(async () => {
  currentUser.value = await getCurrentUser();
  content.value = await getDiaryContent(today[0] + today[1] + today[2]);
  if (content.value.length === 0) {
    content.value = ''
  }
})

const showPreview = (url: any) => {
  ImagePreview([url]);
}

const handleTouchMove = (event) => {
  event.stopPropagation();
}
</script>

<style scoped>

.content {
  position: relative;
  height: 60%;
  width: 95%;
  top: 18%;
}

.write-row {
  position: absolute;
  bottom: 60px;
  right: 10px;
}

.p-space {
  font-weight: bold;
  color: black;
  font-size: 14px;
  border: 0;
  background-color: #ffffff;
}

.write-btn {
  position: fixed;
  bottom: 60px;
  width: 50px;
  height: 50px;
  right: 15px;
  border-radius: 50%;
  background-color: white;
  color: cornflowerblue;
  font-size: 20px;
}

#year-mouth {
  position: absolute;
  top: 18px;
  left: 63px;
  color: darkgray;
}

#day {
  position: absolute;
  top: 12px;
  left: 16px;
  font-size: 35px;
  color: #2177b8;
}

#rank {
  position: absolute;
  top: 12px;
  right: 16px;
  font-size: 35px;
  color: #a9a9a9;
}

#countDown {
  margin-top: 10px;
}

.colon {
  display: inline-block;
  color: #5a9bfa;
}

.block {
  display: inline-block;
  width: 20px;
  color: #5a9bfa;
  font-size: 8px;
  text-align: center;
  border-radius: 7px;
  margin: 2px;
}

.words {
  padding-top: 3px;
  font-size: 12px;
  color: darkgray;
}

#crud {
  position: absolute;
  bottom: 4%;
  left: 30%;

}

#images {
  position: absolute;
  top: 17%;
  width: 100%;
  height: 20%;
}
</style>yle>